﻿<template>
    <el-card v-if="!$mbh5" class="box-card">
        <template #header>
            <div class="card-header">
                <div class="card-title">{{ cfg.title }}</div>
                <my-search-bar :tbname="tbname" v-model="search" />
            </div>
        </template>
        
        <el-tabs
            v-if="tbsSearch"
            stretch
            v-model="tbsSearchValue"
        >
            <el-tab-pane
                v-for="item in getTbsSearch"
                :label="item.label"
                :name="String(item.value)"
                :key="String(item.value)"
            ></el-tab-pane>
        </el-tabs>

        <my-box-grid v-model="page.records" :column="column" :cell="cell" @click="onEdit"></my-box-grid>

        <el-empty v-if="page.totalCount == 0" description="没有符合条件的数据" />

        <el-pagination
            layout="prev, pager, next"
            style="padding-top: 10px"
            v-if="page.pageCount > 1"
            background
            v-model:current-page="page.pageIndex"
            v-model:page-size="page.pageSize"
            :total="page.totalCount"
        ></el-pagination>

        <component
            :is="formName"
            ref="frm"
            :tbname="tbname"
            @added="doLoad"
            @deleted="doLoad"
            @updated="doLoad"
        ></component>
    </el-card>
    <template v-else>
        <div style="width: 100%; ">

        <template v-if="searchType=='dialog'">
            <my-page-header :title="cfg.title" :allow-back="allowBack" :allow-search="allowSearch"
                :allow-add="allowAdd" @goback="onGoback" @search-click="onSearch" @add-click="onAdd">
            </my-page-header>
        </template>
        <template v-else-if="searchType=='always'">
            <my-page-header :title="cfg.title" :allow-back="allowBack" :allow-search="false"
                :allow-add="allowAdd" @goback="onGoback" @add-click="onAdd">
            </my-page-header>
            <div v-if="allowSearch" style="text-align: center;border-bottom: 1px solid #ccc;padding-top: 10px;">
                <my-search-bar :tbname="tbname" v-model="search" @clickSearch="doSearch" :maxSearchItem="10"></my-search-bar>
            </div>
        </template>
        <template v-else>
            <my-page-header :title="cfg.title" :allow-back="allowBack" :allow-search="allowSearch"
                :allow-add="allowAdd" @goback="onGoback" @search-click="onSearch" @add-click="onAdd">
            </my-page-header>
            <div v-show="allowSearch && showSearchBar" style="text-align: center;border-bottom: 1px solid #ccc;padding-top: 10px;">
                <my-search-bar :tbname="tbname" v-model="search" @clickSearch="doSearch"  :maxSearchItem="10"></my-search-bar>
            </div>
        </template>


            <el-tabs
                v-if="tbsSearch"
                stretch
                v-model="tbsSearchValue"
            >
                <el-tab-pane
                    v-for="item in getTbsSearch"
                    :label="item.label"
                    :name="String(item.value)"
                    :key="String(item.value)"
                ></el-tab-pane>
            </el-tabs>


            <my-box-grid v-model="page.records" :column="column" :cell="cell" @click="onEdit"></my-box-grid>

            <el-empty v-if="page.totalCount == 0" description="没有符合条件的数据" />

            <el-pagination
                layout="prev, pager, next"
                style="padding-top: 10px"
                v-if="page.pageCount > 1"
                background
                v-model:current-page="page.pageIndex"
                v-model:page-size="page.pageSize"
                :total="page.totalCount"
            ></el-pagination>

            <component
                :is="formName"
                ref="frm"
                :tbname="tbname"
                @added="doLoad"
                @deleted="doLoad"
                @updated="doLoad"
            ></component>
            <my-search-dlg ref="dlgSearch" :tbname="tbname" @search="doSearch"></my-search-dlg>
        </div>
    </template>
</template>

<script>
import MyBoxGrid from "./MyBoxGrid.vue";
import {Utils,mydate} from './main';

export default {
    components: { MyBoxGrid },
    name: "MyBoxGridPage",
    props: {
        searchType:{
            type:String,
            default:"dialog"
        },
        tbname: {
            type: String,
            required: true,
        },
        allowAdd: {
            type: Boolean,
            default: true,
        },
        allowSearch: {
            type: Boolean,
            default: true,
        },
        allowEdit: {
            type: Boolean,
            default: true,
        },
        allowBack: {
            type: Boolean,
            default: true,
        },
        column: {
            type: Number,
            default: 4,
        },
        pageSize: {
            type: Number,
            default: 8
        },
        //默认的搜索条件
        defaultSearch: Object,
        //子记录编辑界面
        formName: {
            type: String,
            default: "my-form-dlg",
        },
        //页面标题
        label: String,
        //如果ID编辑，还是传入整个记录
        editById: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            cfg: {},
            cell: { title: "Name", value: "", label: "", icon: "" },
            search: {},
            showSearchBar:false,
            newSearch:{},
            tbsSearch:null,
            tbsSearchValue:"",
            page: {
                pageIndex: 1,
                pageCount: 0,
                pageSize: 8,
                totalCount: 0,
                records: [],
            },
        };
    },
    created() {
        this.init();        
    },
    methods: {
        init(){
            this.page.pageSize = this.pageSize;
            if (this.tbname == "") return;
            this.$server.getDM(this.tbname).then((res) => {
                this.cfg = res;
                this.cfg.title = this.label || this.cfg.title;
                this.cell = { ...this.cell, ...res.cell };
                let cfgDefaultSearch = this.getDefaultSearch4Cfg(res);
                this.search = {...cfgDefaultSearch, ...this.defaultSearch};
                if(this.cfg.tbsSearch){
                    this.tbsSearch = this.cfg.tbsSearch
                    let fd = this.cfg.columns.filter((p) => p.code == this.tbsSearch)[0];
                   
                    if(fd.control=="select" && fd.select && fd.select.cfg && fd.select.cfg.tbname){
                        //取动态options
                        let moduleName = fd.select.cfg.tbname;
                        let valueField = fd.select.cfg.valueField || "ID";
                        let labelField = fd.select.cfg.labelField || "Name"; 
                        this.$server.list(moduleName, 1, 1000, fd.select.cfg.search).then((res) => {
                            var lst = [];
                            var records = res.records || res;
                            for (var ix = 0; ix < records.length; ix++) {
                                var record = records[ix];
                                var item = {
                                    value: record[valueField],
                                    label: record[labelField],
                                };
                                lst.push(item);
                            }
                            fd.options = lst;
                            this.tbsSearchValue = fd.default? String(fd.default): String(lst[0].value);
                        });
                    }else{
                        this.tbsSearchValue = fd? String(fd.default || "") : "";
                    }
                }
                //web页面的时候不用， 会搜索工具栏会初始化search条件
                if(this.$mbh5){
                    this.loadData(1);
                }
            });
        },
        onGoback() {
            this.$router.back();//"/main");
        },
         getDefaultSearch4Cfg(res){
            let msearch = {};
            Utils.getTbSearchFields(res, msearch);

            return msearch;
        },
        loadData(pageIndex) {
            pageIndex = pageIndex || this.page.pageIndex;
            var pms = { ...this.defaultSearch, ...this.search };
            if(this.tbsSearch){
                pms[this.tbsSearch] = this.tbsSearchValue;
            }
            
            this.$server
                .list(this.tbname, pageIndex, this.page.pageSize, pms)
                .then((res) => {
                    this.page = res;
                });
        },
        onSearch() {
            if(this.searchType=="dialog"){
                this.$refs.dlgSearch.open(this.search);
            }else{
                this.showSearchBar = !this.showSearchBar;
            }

        },
        onEdit(item) {
            if (this.cfg.ext) {
                let ext = this.cfg.ext.grid || this.cfg.ext.common;
                if (ext && ext.methods && ext.methods.onRowClick) {
                    ext.methods.onRowClick.apply(this, [item]);
                    return;
                }
            }
            if (this.allowEdit) {
                this.$refs.frm.open(this.editById ? item.ID : item);
            } else {
                this.$refs.frm.view(this.editById ? item.ID : item);
            }
        },
        onAdd() {
            this.$refs.frm.open(0);
        },
        doSearch(search) {
            this.search = { ...search };
            this.loadData(1);
        },
        doLoad() {
            this.loadData(0);
        },
        getCellTitle(item) {
            return this.parseCellValue(item, this.cell.title);
        },
        getCellLabel(item) {
            return this.parseCellValue(item, this.cell.label);
        },
        getCellValue(item) {
            return this.parseCellValue(item, this.cell.value);
        },
        getCellIcon(item) {
            return this.parseCellValue(item, this.cell.icon);
        },
        parseCellValue(item, tag) {
            return this.$server.dm_format(this.cfg.columns, item, tag);
        },
    },
    computed: {
        getTbsSearch(){
            if(this.tbsSearch && this.tbsSearch.length>0){
                let fd = this.cfg.columns.filter((p) => p.code == this.tbsSearch)[0];
                if(fd && fd.options){
                    return fd.options;
                }
            }
            return [];
        },
        allowSearch2() {
            if (!this.allowSearch) return false;

            var s1 = this.cfg.search || "";
            if (typeof s1 == "string") return s1.trim().length > 0;
            return s1.length > 0;
        },
    },
    watch: {
        tbname(val){
            this.init();
        },
        pageSize(newValue) {
            this.page.pageSize = newValue;
        },
        search(){
            let js1 = JSON.stringify(this.search);
            let js2 = JSON.stringify(this.newSearch);
            if(js1!=js2){
                this.newSearch = {...this.search};
                this.loadData(1);
            }
        },
        defaultSearch(){
            //routerview keepalive 的时候， 只有defaultSearch条件变化， 此时要重新加载数据
            let cfgDefaultSearch = this.getDefaultSearch4Cfg(this.cfg);
            this.search = {...cfgDefaultSearch, ...this.defaultSearch};
            this.loadData(1);
        },
        tbsSearchValue(val){
            let spm = {};
            spm[this.tbsSearch] = parseInt(val) || val;
            this.search = {...this.search, ...spm};
            this.loadData(1);
        },
        "page.pageIndex":function(){
            this.loadData();
        },
        "page.pageSize":function(){
            this.loadData(1);
        }
    }
};
</script>

<style>
.mlist-cell-icon {
    width: 42px;
    height: 42px;
}

.mlist-cell-icon img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
</style>